<template>
  <div class="body">
    <div id="app" class="login">
      <div class="sign">注冊</div>
      <img class="weyouth" src="../style/img/weyouth.png">
      <div class="list">
        <input placeholder="請輸入手機號 " type="number" v-model="phone">
        <span id="getImg" @click="getImgCode()">獲取图形驗證碼</span>
      </div>
      <div class="gray"></div>
      <div class="imgCode" id="imgCode">
        <div class="imgCode_img">
          <img :src="imgCode">
        </div>
        <div class="change_img">
          <input placeholder="請輸入图形驗證碼" v-model="chat">
          <span @click="getCode()">獲取短信驗證碼</span>
        </div>
        <div class="gray"></div>
      </div>
      <div class="getChat">
        <input placeholder="請輸入短信驗證碼" v-model="msg">
      </div>
      <div class="gray"></div>
      <div class="ist">
        <input placeholder="請輸入新密碼" type="password" v-model="pwd">
      </div>
      <div class="gray"></div>
      <div class="input">
        <input type="checkbox" id="checkbox">
        <span>點擊"立即注冊"按鈕及表示同意協議</span>
      </div>
      <button @click="register()">注册</button>
    </div>
  </div>
</template>

<script>
import { getsms, register } from '@/api/login'
import axios from 'axios'
export default {
  name: 'Register',
  data () {
    return {
      phone: '',
      imgCode: '',
      chat: '',
      msg: '',
      pwd: ''
    }
  },
  methods: {
    GetQueryString (name) {
      var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
      var r = window.location.search.substr(1).match(reg)
      if (r != null) return unescape(r[2])
      return null
    },
    getImgCode () {
      var phone = this.phone
      var isPhone = this.isPoneAvailable(phone)
      if (isPhone) {
        document.getElementById('imgCode').style.display = 'block'
        document.getElementById('getImg').innerHTML = '看不清，换一张'
        this.change()
      } else {
        alert('请输入正确的手机号')
      }
    },
    change () {
      axios.get('/think.php/system/image/getCaptcha', {
        responseType: 'arraybuffer'
      }).then(response => {
        return 'data:image/png;base64,' + btoa(
          new Uint8Array(response.data).reduce((data, byte) => data + String.fromCharCode(byte), '')
        )
      }).then(data => {
        this.imgCode = data
      }).catch(function (err) {
        console.log(err)
      })
    },
    getCode () {
      var phone = this.phone
      var chat = this.chat
      var isPhone = this.isPoneAvailable(phone)
      if (isPhone) {
        if (chat.length === 4) {
          getsms({
            phone: this.phone,
            captcha: this.chat,
            con: this.chackphone(this.phone)
          }).then(response => {
            alert(response.msg)
          }, function (error) {
            console.log(error)
          })
        } else {
          alert('您输入的图形验证码错误，请重新输入')
        }
      } else {
        alert('您输入的手机号格式错误，请输入正确的手机号码')
      }
    },
    register () {
      var isphone = this.isPoneAvailable(this.phone)
      var ispwd = this.pwdType(this.pwd)
      if (document.getElementById('checkbox').checked && isphone && ispwd && this.msg !== '') {
        register({
          phone: this.phone,
          password: this.pwd,
          code: this.msg,
          unionid: this.$route.query.unionid
        }).then(response => {
          console.log(response)
          if (response.code === 1) {
            alert(response.msg)
            this.$router.push('/login')
          } else {
            alert(response.msg)
          }
        }, function (error) {
          console.log(error)
        })
      } else {
        alert('请勾选协议并输入不小于6位的密码')
      }
    },
    isPoneAvailable (str) { // 判断是否手机号
      if (str.length === 11 || str.length === 8) {
        return true
      } else {
        return false
      }
    },
    chackphone: function (str) { // 判断大陆还是香港手机号
      // var reg = /^([6|9])\d{7}$/;
      console.log(str.length)
      if (str.length === 11) {
        return 'China'
      }
      if (str.length === 8) {
        return 'HKSAR'
      }
      // if (str.substr(0, 1) !== 1) {
      //   return 'HKSAR'
      // }
    },
    pwdType (str) {
      if (str.length >= 6) {
        return true
      } else {
        return false
      }
    }
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

.body {
  background: rgb(255, 255, 255);
  font-family: PingFangSC;
  height: 1000px;
}

.login {
  width: 80%;
  margin: auto auto auto;
  padding-top: 30px;
}

input {
  font-size: 16px;
}

input::-webkit-input-placeholder {
  font-size: 16px;
  line-height: 44px;
}

.sign {
  width: 100%;
  text-align: center;
  font-size: 30px;
  margin-bottom: 30px;
}

.login input {
  width: 50%;
  line-height: 30px;
  border: none;
  outline: none;
}

.list span {
  text-align: right;
  color: rgb(127, 127, 127);
  float: right;
  display: inline-block;
  width: 50%;
  line-height: 1.9;
}

.gray {
  margin: 5px 0 20px 0;
  height: 1px;
  background: rgb(212, 212, 212);
}

.ist {
  height: 30px;
}

.ist span {
  display: inline-block;
  width: 50%;
  font-size: 14px;
  text-align: right;
  color: rgb(127, 127, 127);
}

.getChat span {
  text-align: right;
  color: rgb(127, 127, 127);
  float: right;
  display: inline-block;
  width: 38%;
}

.ist input {
  width: 50%;
}

.input {
  width: 100%;
  color: gray;
}

.input input {
  width: 16px;
}

button {
  margin: 50px auto 20px auto;
  width: 100%;
  height: 50px;
  border-radius: 30px;
  background: rgb(249, 119, 130);
  background: linear-gradient(to right, rgba(240, 84, 73, 60%),rgba(240, 89, 67, 75%),rgba(237, 56, 99, 70%),rgba(238, 57, 98, 80%),rgba(237, 56, 99, 80%));
  /* background: linear-gradient(left,#F05449,#F05943,#ED3863,#EE3962,#ED3863); */
  border: none;
  font-size: 24px;
  color: white;
  outline: none;
}

.imgCode {
  width: 100%;
  height: 140px;
  margin-bottom: 10px;
  display: none;
}

.imgCode_img {
  width: 100%;
  height: 70px;
  margin-bottom: 28px;
}

.change_img span {
  text-align: right;
  color: rgb(127, 127, 127);
  float: right;
  display: inline-block;
  width: 50%;
  margin-top: 3px;
  font-size: 16px;
}

.imgCode_img img {
  width: 100%;
  height: 80px;
}

.weyouth {
  width: 100px;
  margin-bottom: 10px;
}
</style>
